import React from 'react'
import { useState } from 'react';
import { Flex, Loading } from 'react-vant';
import style from '../styles/lx.module.css'
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { Button, Input, Form } from 'react-vant'
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000'
export default function List4() {

    let navigate = useNavigate()
    const [form] = Form.useForm()

    const onFinish = async (a) => {
        let { data: { code, data } } = await axios.post('/lx/visitor', a)
        if (code === 200) {
            navigate('/list5?hh='+a.rommid)

        }
    }
    return (
        <div className={style.html5}>
            <div className={style.vv}>
                <ArrowLeft onClick={() => navigate('/list')}></ArrowLeft>
                <span style={{ marginLeft: "3.2rem" }} >访客邀请</span>
            </div>
            <div className={`${style.v1} ${style.content}`}>
                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '.32rem .32rem 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                生成通行证
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        tooltip={{
                            message:
                                'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
                        }}
                        // intro='确保这是唯一的用户名'
                        rules={[{ required: true, message: '请填写用户名' }]}
                        name='rommid'
                        label='房屋'
                    >
                        <Input placeholder='请输入房屋' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='userid'
                        label='房主'
                    >
                        <Input placeholder='请输入被访客姓名' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='name'
                        label='访客姓名'
                    >
                        <Input placeholder='请输入访客姓名' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='gender'
                        label='住户性别'
                    >
                        <Input placeholder='请输入住户性别' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='phone'
                        label='手机号码'
                    >
                        <Input placeholder='请输入手机号码' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='time'
                        label='访客日期'
                    >
                        <Input placeholder='请输入访客日期' />
                    </Form.Item>
                    <Form.Item
                        style={{ marginTop: '0.2rem' }}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='duration'
                        label='访客时长'
                    >
                        <Input placeholder='请输入访客时长' />
                    </Form.Item>
                </Form>
            </div>
            {/* <Flex>
                <Flex.Item span={8}>
                    <Loading size="30" color='#1890ff' />
                </Flex.Item>
            </Flex> */}
        </div>

    )
}

